import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import './TabBar.css'

// 底部导航栏
// - 在病友圈首页显示一个悬浮的“写病友圈”按钮
// - 其余页面展示常规的三个Tab入口
const TabBar = () => {
	const location = useLocation()
	const navigate = useNavigate()
	const isPatientCircleHome = location.pathname === '/patient-circle'

	const goPost = () => navigate('/patient-circle/post')

	return (
		<div className="tab-bar">
			<NavLink
				to="/"
				className={({ isActive }) => `tab-item ${isActive ? 'active' : ''}`}
			>
				<div className="tab-icon">🏠</div>
				<div className="tab-label">首页</div>
			</NavLink>

			{!isPatientCircleHome && (
				<NavLink
					to="/patient-circle"
					className={({ isActive }) => `tab-item ${isActive ? 'active' : ''}`}
				>
					<div className="tab-icon">👥</div>
					<div className="tab-label">病友圈</div>
				</NavLink>
			)}

			<NavLink
				to="/video"
				className={({ isActive }) => `tab-item ${isActive ? 'active' : ''}`}
			>
				<div className="tab-icon">🎬</div>
				<div className="tab-label">视频</div>
			</NavLink>

			{/* 病友圈首页显示悬浮按钮 */}
			{isPatientCircleHome && (
				<button className="fab-post" onClick={goPost} aria-label="写病友圈">
					<span className="fab-pencil">✏️</span>
				</button>
			)}
		</div>
	)
}

export default TabBar